<template>
  <div class="container">
    <div>{{name}}</div>
    <button @click="updatename()">点击修改</button>
  </div>
</template>

<script>
import { reactive, toRef } from 'vue'
export default {
  name: 'App',
  setup () {
    const obj = reactive({
      name: 'ls',
      age: 18
    })
    console.log(obj); //Proxy {name: "ls", age: 18} proxy代理对象
    // 模板中只想使用name数据
    // let { name } = obj 不是响应式数据对象

    // toRef响应式数据，只用其中的一项数据
    const name = toRef(obj, 'name')
    console.log(name);

    const updatename = () => {
      console.log('updatename');
      name.value = 'ww'
    }
    return { name, updatename }
  }
}
</script>

<style>
</style>